import { Column } from '@/components/pro-panel/index.typing';
import { LayerTypeEnum, options } from './index';

export const useNormalColumns = (formData: any, changeLayerType: Function) => {
  /**
   * 常规区域面
   */
  const normalColumns = computed<Column[]>(() => {
    /** 常规区域面  基础设置  */
    const basicColumns: Column[] = [
      {
        type: 'select',
        prop: 'layerType',
        label: '图层类型',
        group: 'basic',
        options: LayerTypeEnum,
        formProps: {
          onChange: changeLayerType,
        },
      },
      {
        type: 'select',
        prop: 'heightKey',
        label: '离地高度',
        group: 'basic',
        options: [],
        span: 11,
        formProps: {
          placeholder: '无/按字段',
        },
      },
      {
        type: 'slot',
        prop: 'addIconSlot',
        label: ' ',
        group: 'basic',
        span: 2,
        formProps: {
          placeholder: '按字段值拔高',
        },
      },
      {
        type: 'input-number',
        prop: 'heightValue',
        label: ' ',
        group: 'basic',
        span: 11,
        formProps: {
          controls: false,
          placeholder: '无/按字段',
        },
      },
      {
        type: 'select',
        prop: 'extrudedHeightKey',
        label: '拔地高度',
        group: 'basic',
        options: [],
      },
      {
        type: 'select',
        prop: 'extrudedHeightFeild',
        label: '',
        group: 'basic',
        options: [],
        span: 12,
      },
      {
        type: 'input-number',
        prop: 'extrudedHeightValue',
        label: '',
        group: 'basic',
        span: 12,
        formProps: {
          controls: false,
        },
      },
    ];

    /** 常规区域面  填充效果  颜色  */
    const fillEffectColorColumns: Column[] = [
      {
        type: 'color-picker',
        prop: 'fillColor',
        label: '填充',
        group: 'fillEffect',
      },
      {
        type: 'progress-input',
        prop: 'alpha',
        label: '透明度',
        group: 'fillEffect',
        formProps: {
          min: 0,
          max: 2,
          step: 0.01,
        },
      },
      {
        type: 'checkbox',
        prop: '垂直发光222',
        label: '',
        group: 'fillEffect',
        options: [{ label: '垂直发光', value: 1 }],
      },
    ].map((item: any) => ({
      ...item,
      visible: formData.fillTab === '颜色',
    }));

    /** 常规区域面  填充效果  贴图  */
    const fillEffectImgColumns: Column[] = [
      {
        type: 'select',
        prop: 'topStyle',
        label: '顶部样式',
        group: 'fillEffect',
        options: [],
        span: 12,
      },
      {
        type: 'select',
        prop: 'sideStyle',
        label: '侧面样式',
        group: 'fillEffect',
        options: [],
        span: 12,
      },
      {
        type: 'select',
        prop: 'raiseSetting',
        label: '拔高设置',
        group: 'fillEffect',
        options: [],
        formProps: {
          placeholder: '拉伸/平铺',
        },
      },
      {
        type: 'progress-input',
        prop: 'alpha',
        label: '透明度',
        group: 'fillEffect',
        formProps: {
          min: 0,
          max: 2,
          step: 0.01,
        },
      },
      {
        type: 'checkbox',
        prop: '垂直发光1111',
        label: '',
        group: 'fillEffect',
        options: [{ label: '垂直发光', value: 1 }],
      },
      {
        type: 'checkbox',
        prop: '颜色叠加',
        label: '',
        group: 'fillEffect',
        options: [{ label: '颜色叠加', value: 1 }],
        span: 12,
      },
      {
        type: 'color-picker',
        prop: 'borderColor1',
        label: '',
        group: 'fillEffect',
        span: 12,
      },
      {
        type: 'checkbox',
        prop: '亮度叠加222222',
        label: '',
        group: 'fillEffect',
        options: [{ label: '亮度叠加', value: 1 }],
        span: 12,
      },
    ].map((item: any) => ({
      ...item,
      visible: formData.fillTab === '贴图',
    }));

    /** 常规区域面  边框效果  颜色  */
    const borderEffectColorColumns = [
      {
        type: 'color-picker',
        prop: 'borderColor',
        label: '填充',
        group: 'borderEffect',
      },
      {
        type: 'input-number',
        prop: 'heightValue',
        label: '线宽',
        group: 'borderEffect',
        formProps: {
          controls: false,
        },
      },
      {
        type: 'progress-input',
        prop: 'borderAlpha2',
        label: '透明度',
        group: 'borderEffect',
        formProps: {
          min: 0,
          max: 2,
          step: 0.01,
        },
      },
      {
        type: 'progress-input',
        prop: 'borderLight',
        label: '发光',
        group: 'borderEffect',
        formProps: {
          min: 0,
          max: 2,
          step: 0.01,
        },
      },
      {
        type: 'checkbox',
        prop: '垂直发光1',
        label: '',
        group: 'borderEffect',
        options: [{ label: '垂直发光', value: 1 }],
      },
      {
        type: 'checkbox',
        prop: '亮度叠加1',
        label: '',
        group: 'borderEffect',
        options: [{ label: '亮度叠加', value: 1 }],
      },
    ].map((item: any) => ({
      ...item,
      visible: formData.borderTab === '颜色',
    }));

    /** 常规区域面  边框效果  贴图  */
    const borderEffectImgColumns: Column[] = [
      {
        type: 'select',
        prop: 'fillStyle',
        label: '样式',
        group: 'borderEffect',
        options: [],
      },
      {
        type: 'select',
        prop: 'chartlet',
        label: '贴图重复',
        group: 'borderEffect',
        options: [],
        span: 12,
        formProps: {
          placeholder: '等倍/等距',
        },
      },
      {
        type: 'input-number',
        prop: 'chartletLength',
        label: ' ',
        group: 'borderEffect',
        span: 12,
        formProps: {
          controls: false,
        },
      },
      {
        type: 'input-number',
        prop: 'borderWidth',
        label: '线宽',
        group: 'borderEffect',
        formProps: {
          controls: false,
        },
      },
      {
        type: 'progress-input',
        prop: 'borderAlpha1',
        label: '透明度',
        group: 'borderEffect',
        formProps: {
          min: 0,
          max: 2,
          step: 0.01,
        },
      },
      {
        type: 'progress-input',
        prop: 'borderAlpha',
        label: '滚动速度',
        group: 'borderEffect',
        formProps: {
          min: 0,
          max: 2,
          step: 0.01,
        },
      },
      {
        type: 'checkbox',
        prop: '颜色叠加',
        label: '',
        group: 'borderEffect',
        options: [{ label: '颜色叠加', value: 1 }],
        span: 12,
      },
      {
        type: 'color-picker',
        prop: 'borderColor1',
        label: '',
        group: 'borderEffect',
        span: 12,
      },
      {
        type: 'checkbox',
        prop: '发光5',
        label: '',
        group: 'borderEffect',
        options: [{ label: '发光', value: 1 }],
      },
      {
        type: 'progress-input',
        prop: 'borderAlpha5',
        label: '',
        group: 'borderEffect',
        formProps: {
          min: 0,
          max: 2,
          step: 0.01,
        },
      },
      {
        type: 'checkbox',
        prop: '垂直发光411',
        label: '',
        group: 'borderEffect',
        options: [{ label: '垂直发光', value: 1 }],
      },
      {
        type: 'checkbox',
        prop: '亮度叠加23',
        label: '',
        group: 'borderEffect',
        options: [{ label: '亮度叠加', value: 1 }],
      },
    ].map((item: any) => ({
      ...item,
      visible: formData.borderTab === '贴图',
    }));

    return [
      {
        type: 'input',
        prop: 'name',
        label: '名称',
        required: true,
        rules: [{ required: true, message: '名称不能为空' }],
      },
      ...basicColumns,
      /** 常规区域面  填充效果  */
      {
        type: 'tab',
        prop: 'fillTab',
        label: '',
        group: 'fillEffect',
        formProps: {
          options: options,
          size: 'large',
        },
      },
      ...fillEffectColorColumns,
      ...fillEffectImgColumns,
      /** 常规区域面  边框效果  */
      {
        type: 'tab',
        prop: 'borderTab',
        label: '',
        group: 'borderEffect',
        formProps: {
          options: options,
          size: 'large',
        },
      },
      ...borderEffectColorColumns,
      ...borderEffectImgColumns,
    ];
  });

  return {
    normalColumns,
  };
};
